<template>
  <ul class="new-view-list">
    <li class="new-view-item van-hairline--bottom tap-active" v-for="item in viewList" :key="item.id" @click="$router.push(`/view/detail/${item.id}/`)">
      <div class="view-header">
        <van-image lazy-load  width="35px" height="35px" round :src="item.tgInfo.avatar" class="avatar" @click.native.stop="$router.push(`/adviser/detail/${item.tgInfo.id}/`)" />
        <div class="info">
          <p class="name">{{item.tgInfo.name}}</p>
          <p class="time">发布时间：{{item.publishTime | dateFormat('YYYY-MM-DD HH:mm')}}</p>
        </div>
      </div>
      <h4 class="van-ellipsis">{{item.title}}</h4>
      <p class="van-multi-ellipsis--l2">
        {{item.summary}}
      </p>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    viewList: {
      type: Array,
      default: []
    }
  }
}
</script>

<style lang="less">
.new-view-list {
  background: #fff;
  .new-view-item {
    padding: 15px;
    color: #5e616b;
    font-size: 14px;

    h4 {
      margin: 10px 0;
      color: #2b313d;
      font-size: 16px;
    }

    .view-header {
      display: flex;
      align-items: center;
      font-size: 13px;
      line-height: 1.3;

      .name {
        color: #121d32;
        font-size: 14px;
        font-weight: 400;
      }

      .time {
        font-size: 12px;
        color: #919bb2;
      }

      .price {
        flex: 1;
        text-align: right;
        color: #4C7AFD;
      }

      .avatar {
        display: inline-block;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }
    }
  }
}
</style>
